﻿@{
    ViewBag.Title = null;
    Layout = null;
}

<html>
<head>
    <title>二维码</title>
    
    <script src="~/Scripts/jquery-1.10.2.js"></script>

    <style type="text/css">
        * {
        margin:0px;
        border:0px;
        }
        #concent {
        width:650px;
        overflow:hidden;
        border:1px solid black;
        margin:auto;
        
        }


        #left
        {
            float:left;
        }
        #right 
        {
            float: right;
        }

    </style>




</head>


<body>
    <div id="concent">
        <div style="border:1px solid black;width:300px; margin:auto;" id="left">
            <div style="width:100px;margin:auto;font-weight:800">生成二维码</div>
            <table>
                <tr>
                    <td style="height:40px;width:80px;">
                        <span>输入信息</span>
                    </td>

                    <td >
                        <textarea style="width:210px;height:100px;border:1px solid black" id="IN"> </textarea>
                    </td>
                </tr>

                <tr>
                    <td>
                        <input type="button" value="确定" id="bn_sure" style="width:80px;"/>
                    </td>
                    <td>
                        <input type="button" value="取消" id="bn_Cancle"style="width:80px;margin-left:120px;" />
                    </td>

                </tr>
              
            </table>
            <div id="QRIMG" style="border:1px solid black;width:300px; height:230px; margin:auto;">
               <div style="width:150px;margin:auto;font-weight:800">生成的二维码图片：</div>
                    @*<img src="#" id="QRImg" />*@

               
            </div>
            <div style="width:80px;margin:auto;">
                <button id="download" style="width:80px">下载</button>
            </div>
        </div>

        <div style="border:1px solid black;width:300px; margin:auto;" id="right">
            <div style="width:100px;margin:auto; font-weight:800">二维码解析</div>
            <div>
                <input  type="file" id="Upload"/>
            </div>
            <div>
                <div id="imgshow" style="height:220px;width:300px;border:1px solid black">


                </div>
                <div style="width:80px;margin:auto;">
                    <input type="button" id="uplodBtn" value="确定" style="width:80px;" />
                </div>
               
            </div>
          
            <div id="messageinfo">
               <div style="width:140px;margin:auto;font-weight:800">二维码解析信息： </div> 
                
                <textarea id="messageinfotext" style="width:300px;height:95px;border:1px solid black"> </textarea>
            </div>

        </div>


    </div>
  <script type="text/javascript">
     
      $(function () {
          
          var url = "";
          $("#bn_sure").click(function () {
              var intext = $("#IN").val();
              $.ajax({
                  url: '../TwoWeiMa/CreateImg',
                  data: { MessageInfo: intext},
                  datatype: 'Json',
                  type: 'post',
                  success: function (res) {
                      console.log(res)
                      if (res.IsTrue)
                      {
                          //$("#QRImg").attr('src', src = res.path ); //显示图片
                          $("#QRIMG").append("<div style='width:200px;margin-top:10px;  margin:auto;'> <img src=" + '../' + res.path + "  id='load'/></div>")
                          //$("#QRIMG").append("<div><a href=../" + res.path + ">下载 </a></div>")
                          //$("#QRIMG").append("<div><button id='downLoad'>下载</button></div>")
                          url = "../" + res.path;
                      }
                      else
                      {
                          alert(res.Meg);
                      }
                  }
              })
          })


          ///
          $("#Upload").click(function () {
           
      




          })

          $("#uplodBtn").click(function () {
            
              var formdata = new FormData();
              formdata.append("file", $('#Upload')[0].files[0]);

              $.ajax({
                  url:  '../TwoWeiMa/QRcodeDECode',
                  data: formdata,
                  type: 'post',
                  contentType: false, // 不设置内容类型
                  processData: false, // 不处理数据
                  dataType: "json",
                  success: function (res) {
                      if (res.IsTrue)
                      {
                          $("#messageinfotext").val(res.Meg) 
                      }
                  },
                  error: function ()
                  {

                  }
              })
          })

          ///下载
          $("#download").click(function () {
              var intext = $("#IN").val();
              let alink = document.createElement("a");
              alink.download = intext;//文件名,大部分浏览器兼容,IE10及以下不兼容
              alink.href = url;//创建 url地址
              alink.click(); //自动点击
          })
       

      })
  </script>




</body>


</html>
